<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.masonry {
				-moz-column-count: 3;
				/* Firefox */
				-webkit-column-count: 3;
				/* Safari 和 Chrome */
				column-count: 3;
				-moz-column-gap: 2em;
				-webkit-column-gap: 2em;
				column-gap: 2em;
				width: 70%;
				margin: 2em auto;
			}

			.item {
				padding: 2em;
				margin-bottom: 2em;
				-moz-page-break-inside: avoid;
				-webkit-column-break-inside: avoid;
				break-inside: avoid;
				background: #f60;
				color: #fff;
				text-align: center;
			}

			.item .content-lar {
				height: 200px;
			}

			.item .content-mid {
				height: 100px;
			}

			.item .content-sma {
				height: 50px;
			}

			@media screen and (max-width: 800px) {
				.masonry {
					column-count: 2;
					/* two columns on larger phones */
				}
			}

			@media screen and (max-width: 500px) {
				.masonry {
					column-count: 1;
					/* two columns on larger phones */
				}
			}
		</style>
	</head>
	<body>
		<div class="masonry">
			<div class="item">
				<div class="item_content content-lar"> 1 我最大 </div>
			</div>
			<div class="item">
				<div class="item_content content-sma"> 2 我最小 </div>
			</div>
			<div class="item">
				<div class="item_content content-mid"> 3 我中等 </div>
			</div>
			<div class="item">
				<div class="item_content content-sma"> 4 我最小 </div>
			</div>
			<div class="item">
				<div class="item_content content-mid"> 5 我中等 </div>
			</div>
			<div class="item">
				<div class="item_content content-lar"> 6 我最大 </div>
			</div>
			<div class="item">
				<div class="item_content content-sma"> 7 我最小 </div>
			</div>
			<div class="item">
				<div class="item_content content-lar"> 8 我最大 </div>
			</div>
			<div class="item">
				<div class="item_content content-lar"> 9 我最大 </div>
			</div>
			<div class="item">
				<div class="item_content content-sma"> 10 我最小 </div>
			</div>
			<div class="item">
				<div class="item_content content-mid"> 11 我中等 </div>
			</div>
			<div class="item">
				<div class="item_content content-mid"> 12 我中等 </div>
			</div>
			<!-- more items -->
		</div>

	</body>
	<script src="../js/inCommonUse.js"></script>
	<script type="text/javascript">
		let tp ='';
		for (let i = 0; i<900; i++) {
			// console.log(i%3 === 0)
			if (i % 2 === 0) {
				 // <img src='https://p0.ssl.qhimgs1.com/sdr/400__/t0183aec27051f136d4.jpg' style='width:100%;height:100%'>
				tp += `<div class="item"> 
		    <div class="item_content content-lar"> </div> 
		  </div>`
			} else if (i % 3 === 0) {
				// <img src="https://p2.ssl.qhimgs1.com/sdr/400__/t01fb2911c1b5a05aa2.jpg" style='width:100%;height:100%'>
				tp += `<div class="item">
				  <div class="item_content  content-mid">  </div> 
				</div>`
			} else {
				 // <img src="https://p5.ssl.qhimgs1.com/sdr/400__/t01506398ee3fcfdd1f.jpg" style='width:100%;height:100%'>
				tp += `<div class="item">
				  <div class="item_content content-sma"> </div> 
				</div>`
			}
		}
		document.querySelector('.masonry').innerHTML = tp
		// console.log(tp)
		// document.body.innerHTML = tp
		
		// new SetSession()
		new session('123').set('key1','2020年中国年123')
		console.log(new session(123).get('key1'))
		// new session().removeKey('key1')
		// new session().removeAll()
		// function sesslo() {
		// 	this.sess = window.sessionStorage
		// }
		// sesslo.prototype.get = function(key , value) {
		// 	this.sess.setItem(key,window.btoa(value))
		// }
		// sesslo.prototype.get = function (key) {
		// 	this.sess.getItem(key)
		// }
		// // sesslo()
		// new sesslo().get(1,2)
		
		// let s;
		// console.log(s)
		// if (s)
		// console.log(s)
 Ajax('post','http://60.10.165.110:8001/fbjd/msg/weather',{city:101090608})

 
 
 class  Uer{ // 类
 	constructor(name,age) { //构造器
 	    this.name = name;
 		this.age = age;
 	}
 	//下面 name 和age 是扩展方法
 	UserName(){ //方法  
 		console.log(this.name)
 	}
 	UserAge(){
 		console.log(this.age)
 	}
 }
 /*方法调用*/
 // var zx = new Uer('自夏',18);
 // zx.UserName()
 // Vipuse (新的一个方法) extends(关键字) 继承 uer(已有的方法) 
 class Vipuser extends Uer{  //子类 
 	constructor(name,age) { //子类构造器
 	    super(name,age);  //super 父类(用来继承uer 方法) 超类
 	}
 	//新添加的方法
 	userleve(vip){
 		console.log(this.vip = vip)
 	}
 }
 let u = new Vipuser('自夏','22');
 u.UserName()
 u.UserAge();
 u.userleve(10)
 
 
	</script>
</html>
